/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="xc-body">
		<view class="xc-mask" @click="close()"  @touchmove.prevent></view>
		<view class="xc-area">
			<view class="xc-head">
				<view class="close" @click="close()">
					<image src="/static/close.png" mode=""></image>
				</view>
				<text>加入行程</text>
			</view>
			<!-- 加入行程-宾馆 -->
			<view class="room-list" v-if="config.typeId == 2">
				<view class="room-item"  v-for="(item,index) in roomData"  :key='index'>
					<image :src="item.img" ></image>
					<view class="item-right">
						<view class="item-title"  @click="toInfo">
							<text class="title-text">{{item.name}}</text>
							<image src="/static/jiantou.png" mode=""></image>
						</view>
						<text class="tip">{{item.tip}}</text>
						<view class="hd-list" >
							<view class="hd-item" v-for="(hd,index) in item.hd" :key='index'>
								<text>{{hd}}</text>
							</view>
						</view>
						<text class="quxiao">{{item.quxiao}}</text>
						<text class="price">￥{{item.prize}}</text>
						<view class="buy"  @click="addXc()">加入行程</view>
					</view>
				</view>
				<!-- <view class="spot-commit" @click="addXc()">完  成</view> -->
			</view>	
			<!-- 加入行程-票 -->
			<view class="spot-list"  v-if="config.typeId == 1">
				<!-- <view class="list-title">
					<text class='shu'></text>
					<text>选择门票</text>
				</view> -->
				<!-- <view class="spot-item" :class="spotIndex==index?'spot-item-ac':''" @click="spotIndex=index" v-for="(item,index) in spotData"  :key='index'>
					<image class="" v-if="spotIndex==index" src="/static/xc-yes.png" mode=""></image>
					<text class="title-text" @click="showTicketDetail()">{{item.name}}</text>
					<text class="price">￥{{item.prize}}</text>
					<view class="buy" >加入行程</view>
				</view>
				<view class="spot-commit" @click="addXc()">完  成</view> -->
				<view class="ticketAll">
					<view class="ticket"  @click="showTicketDetail()">
						<text class="man">成人票</text>
						<view class="xuzhi">
							<text class="yuding">最早可订明日票</text>
							<view class="fuli">
								<text class="tui">随时退</text>
								<text class="noneed">无需取票</text>
							</view>
							<view class="overs">
								<text class="payover">已售2549</text>
								<view class="shutiao"></view>
								<navigator url="" class="paymust">购买须知</navigator>
								<image src="../../../static/jiantou.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="price">￥58</view>
						<view class="buy" @click="addXc">加入行程</view>
					</view>
				</view>
				<view class="line"></view>
				
				<view class="ticketAll">
					<view class="ticket"  @click="showTicketDetail()">
						<text class="man">学生票</text>
						<view class="xuzhi">
							<text class="yuding">最早可订明日票</text>
							<view class="fuli">
								<text class="tui">随时退</text>
								<text class="noneed">无需取票</text>
							</view>
							<view class="overs">
								<text class="payover">已售2549</text>
								<view class="shutiao"></view>
								<navigator url="" class="paymust">购买须知</navigator>
								<image src="../../../static/jiantou.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="price">￥45</view>
						<view class="buy" @click="addXc">加入行程</view>
					</view>
				</view>
				<view class="line"></view>
				
				<view class="ticketAll">
					<view class="ticket"  @click="showTicketDetail()">
						<text class="man">儿童票</text>
						<view class="xuzhi">
							<text class="yuding">最早可订明日票</text>
							<view class="fuli">
								<text class="tui">随时退</text>
								<text class="noneed">无需取票</text>
							</view>
							<view class="overs">
								<text class="payover">已售2549</text>
								<view class="shutiao"></view>
								<navigator url="" class="paymust">购买须知</navigator>
								<image src="../../../static/jiantou.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="price">￥30</view>
						<view class="buy" @click="addXc">加入行程</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
			<!-- 加入行程-美食 -->
			<view class="room-list"  v-if="config.typeId == 3">
				<view class="room-item" v-for="(item,index) in foodData"   :key='index'>
					<image :src="item.img" ></image>
					<view class="item-right">
						<view class="item-title"  @click="toInfo">
							<text class="title-text">{{item.name}}</text>
							<image src="/static/jiantou.png" mode=""></image>
							<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
							<text class="paymust">详情 | 购买须知</text>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
							<text class="paymust" >详情 | 购买须知</text>
							<!-- #endif -->
						</view>
						<text class="tip" >{{item.des}}</text>
					
						<text class="price">￥{{item.prize}}</text>
						<view class="buy" @click="addXc()">加入行程</view>
					</view>
				</view>
				<!-- <view class="spot-commit" @click="addXc()">完  成</view> -->
			</view>
			<!-- 娱乐-加入行程 -->
			<view class="room-list play-list"  v-if="config.typeId == 4">
				<view class="room-item"  v-for="(item,index) in playData"  :key='index'>
					<image :src="item.img" @click="toInfo"></image>
					<view class="item-right">
						<view class="item-title"  @click="toInfo">
							<text class="title-text">{{item.name}}</text>
							<view class="titFr">
								<text>详情</text>|
								<text>购买须知</text>
								<image src="/static/jiantou.png" mode=""></image>
							</view>
						</view>
						
						<view class="hd-list" >
								<text>{{item.pro}}</text>
						</view>
						<view class="hd-list" >
								<text>{{item.time}}</text>
						</view>
						<view class="botm-price">
							<text class="price">￥{{item.prize}}/人</text>
							<!-- <text class="oldPrice">￥{{item.oldPrize}}</text> -->
							<view class="buy"  @click="addXc()">加入行程</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			config: {
				type: Object,
				default: function() {
					return {
						typeId:0
					}	
				}
			},
		},
		data(){
			return{
				spotIndex:0,
				roomIndex:0,
				roomData:[
					{
						name:'商务房',
						far:5,
						tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
						prize:298,
						hd:['入住立减','---优惠'],
						quxiao:'!有条件取消',
						img:'/static/banner.png',
						
					},
					{
						name:'双人床',
						far:5,
						tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
						prize:268,
						hd:['入住立减'],
						quxiao:'!有条件取消',
						img:'/static/banner.png',
						
					},
					{
						name:'商务房',
						far:5,
						tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
						prize:298,
						hd:['入住立减','---优惠'],
						quxiao:'!有条件取消',
						img:'/static/banner.png',
						
					},
				],
				spotData:[
					{
						name:'成人票',
						prize:58,
					},
					{
						name:'学生票',
						prize:30,
					},
					{
						name:'儿童票',
						prize:30,
					},
				],
				foodData:[
					{
						name:'招牌二人餐',
						prize:298,
						des:'大虾，小肥羊肉，精品牛肉，蜜汁酱牛肉，蔬菜拼盘，酸梅汤，藕片',
						img:'/static/banner.png',
						
					},
					{
						name:'招牌四人餐',
						prize:268,
						des:'大虾，小肥羊肉，精品牛肉，蜜汁酱牛肉，蔬菜拼盘，酸梅汤，藕片',
						img:'/static/banner.png',
						
					},
				],
				playData:[
						{
							name:'密室逃脱',
							far:5,
							tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
							prize:298,
							oldPrize:198,
							pro:'角色扮演、沉浸体验',
							time:'限时110分钟',
							quxiao:'!有条件取消',
							img:'/static/banner.png',
						},
						{
							name:'密室逃脱',
							far:5,
							tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
							prize:298,
							oldPrize:198,
							pro:'角色扮演、沉浸体验',
							time:'限时110分钟',
							quxiao:'!有条件取消',
							img:'/static/banner.png',
						},
						{
							name:'密室逃脱',
							far:5,
							tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
							prize:298,
							oldPrize:198,
							pro:'角色扮演、沉浸体验',
							time:'限时110分钟',
							quxiao:'!有条件取消',
							img:'/static/banner.png',
						},
				]
			}
		},
		methods: {
			addXc(){
				if(this.config.typeId == 1){
					uni.navigateTo({
						url:'/pages/common/date'
					})
				}
				if(this.config.typeId == 2){
					uni.navigateTo({
						url:'/pages/home/hotel/hotelDate'
					})
				}
				if(this.config.typeId == 3){
					uni.navigateTo({
						url:'/pages/home/food/foodOrder'
					})
				}
				if(this.config.typeId == 4){
					uni.navigateTo({
						url:'/pages/home/Recreation/recreationOrder'
					})
					
				}
				
				// //#ifdef APP-PLUS|| MP-WEIXIN
				// this.$parent.toOrder();
				// //#endif
				// //#ifndef APP-PLUS|| MP-WEIXIN
				// this.$parent.$parent.toOrder();
				// //#endif
				// this.close()
			},
			toInfo(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.showPlayDetail();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.showPlayDetail();
				//#endif
			},
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeXcType();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeXcType();
				//#endif
			},
		},
		toOrder(){
			uni.navigateTo({
				url:'/pages/home/scenicSpot/spotOrder'
			})
		},
		toOrderByXc(){
			uni.navigateTo({
				url:'/pages/home/scenicSpot/spotOrder'
			})
		},
		created(){
			document.body.style.overflow = 'hidden'
			console.log(this.config.typeId)
		}
	}
</script>

<style scoped>
	.xc-body{
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 35;
		left: 0;
	}
	.xc-area{
		width: 750upx;
		height: auto;
		bottom: 0;
		padding-bottom: 40upx;
		z-index: 36;
		position: absolute;
		border-radius: 30upx  30upx 0 0;
		box-shadow:0 0 5px rgba(206,206,206,0.75);
		background: #FFFFFF;
	}
	.xc-head{
		width: 100%;
		height: 100upx;
		position: relative;
		border-bottom: rgba(220,220,220,1.00) solid 1upx;
	}
	.close{
		width: 100upx;
		height: 100upx;
		position: absolute;
		right:0;
		z-index: 5;
		top: 0;
	}
	.paymust{
		font-size: 25upx;
		color: #5595FF;
		line-height: 40upx;
		float: right;
	}
	
	.close image{
		width: 28upx;
		height: 28upx;
		margin: 36upx;
	}
	.xc-head text{
		position: absolute;
		text-align: center;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		display: block;
		font-size: 30upx;
	}
	
	.xc-mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		top: 0;
		z-index: 35;
		left: 0;
		background: rgba(0,0,0,0.3);
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	
	/* 房间选择 */
	.room-list{
		width: 650upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20upx;
	}
	.room-item{
		width: 650upx;
		height: 182upx;
		margin-top: 25upx;
	}
	.room-item-ac{
		border: #5776FE solid 1upx;
		border-radius: 20upx;
		padding: 4upx 4upx 8upx 4upx;
	}
	.room-item image{
		margin: 10upx  10upx 0upx 10upx;
		width: 200upx;
		height: 172upx;
		float: left;
		border-radius: 10upx;
	}
	.room-list .item-right{
		width: 420upx;
		height: 182upx;
		float: right;
	}
	.room-list .item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
	}
	.room-list .title-text{
		font-size: 32upx;
		float: left;
	}
	
	.room-list .item-title image{
		width: 20upx;
		height: 23upx;
		float: right;
		font-size: 21upx;
		color: #666666;
	}
	.room-list .far{
		width: 100%;
		display: block;
		font-size: 25upx;
		color: #666666;
	}
	.room-list .tip{
		width: 100%;
		display: block;
		margin-top: 5upx;
		font-size: 25upx;
		color: #666666;
	}
	.room-list .hd-list{
		width: 100%;
		height: 25upx;
		display: flex;
		flex-direction: row;
		margin-top: 10upx;
	}
	.room-list .hd-item{
		width: 119upx;
		height: 30upx;
		border: #FE5706 solid 1upx;
		border-radius: 20upx;
		margin-right: 15upx;
		color: #FE5706;
		text-align: center;
		line-height: 30upx;
		font-size: 20upx;
	}
	.room-list .price{
		font-size: 32upx;
		color: #DD540A;
		margin-top: 15upx;
		float: left;
		margin-left: 20upx;
	}
	.room-list .buy{
		width: 127upx;
		height: 40upx;
		margin-top: 15upx;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		line-height: 40upx;
		border-radius: 20upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.room-list .quxiao{
		font-size: 28upx;
		color: #000000;
		margin-top: 20upx;
		float: left;
	}
	
	
	/* 房间预定 */
	.spot-list{
		width: 690upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40upx;
		height: auto;
	}
	.spot-item{
		width: 690upx;
		height: 80upx;
		border-radius: 40upx;
		background: #F6F6F6;
		margin-top: 50upx;
	}
	.spot-item image{
		position: absolute;
		width: 50upx;
		height: 32upx;
	}
	.spot-item-ac{
		border: #5776FE solid 1upx;
	}
	.spot-list .title-text{
		font-size: 28upx;
		float: left;
		margin-left: 60upx;
		line-height: 80upx;
	}
	.spot-list .price{
		font-size: 28upx;
		line-height: 80upx;
		color: #DD540A;
		float: left;
		margin-left: 100upx;
	}
	.spot-list .buy{
		width: 138upx;
		height: 60upx;
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		margin-right: 10upx;
		line-height: 60upx;
		margin-top: 12upx;
		border-radius: 30upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.spot-list .quxiao{
		font-size: 28upx;
		color: #000000;
		margin-top: 20upx;
		float: left;
	}
	.spot-commit{
		width: 600upx;
		height: 80upx;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		margin-left: 45upx;
		margin-top: 80upx;
		border-radius: 20upx;
	}
	/* 娱乐-加入行程 */
	.play-list .item-right{
		position: relative;
		width: 430upx;
		height: 182upx;
		float: right;
	}
	.play-list .botm-price{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom:0
	}
	.play-list .item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.play-list .titFr{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #5595FF;
		font-size: 20upx;
	}
	.play-list .titFr text{
	padding:5upx;
	}
	.play-list .title-text{
		font-size: 32upx;
		float: left;
	}
	
	.play-list .item-title image{
		width: 20upx;
		height: 23upx;
		float: right;
		font-size: 21upx;
		color: #666666;
	}
	.play-list .hd-list{
		width: 100%;
		height: 25upx;
		display: flex;
		flex-direction: row;
		margin-top: 10upx;
		color: #999999;
		font-size: 24upx;
	}
	
	/*门票行程*/
	.ticketAll{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items:center;
	}
	.ticket{
		display: flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		margin-top: 30upx;
		margin-left: 20upx;
	}
	.ticket .man{
		font-size: 32upx;
		color: #010101;
	}
	.xuzhi{
		display: flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
		width:520upx; 
	}
	.overs{
		display: flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:center;
	}
	.yuding{
		font-size: 26upx;
		color: #5694FF;
		margin-top: 25upx;
		margin-left: -335upx;
	}
	.fuli{
		display: flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:center;
	}
	.tui{
		font-size: 26upx;
		color: #5694FF;
		margin-top: 25upx;
		margin-left: -260upx;
	}
	.noneed{
		font-size: 26upx;
		color: #999999;
		margin-top: 25upx;
		margin-left: 30upx;
	}
	.payover{
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(171,171,171,1);
		margin-top: 25upx;
		margin-left: -255upx;
	}
	.shutiao{
		width: 5upx;
		height: 26upx;
		background:#ABABAB;
		margin-top: 25upx;
		margin-left: 10upx;
	}
	.paymust{
		font-size: 26upx;
		color: #999999;
		margin-top: 25upx;
		margin-left: 10upx;
	}
	.xuzhi image{
		width: 18upx;
		height: 23upx;
		margin-top: 26upx;
		color: #559EFF;
		/* background: rgba(85,167,255,1); */
		margin-left: 10upx;
	}
	.money{
		display: flex;
		flex-direction:column;
		justify-content:flex-end;
		/* align-items:center; */
		margin-right: 42upx;
	}
	.money .price{
		font-size: 32upx;
		font-family: Microsoft YaHei Regular;
		color: rgba(226,81,21,1);
		margin-left: 58upx;
	}
	.money .buy{
		margin-top: 47upx;
	}
	.line{
		width: 658upx;
		height: 1upx;
		background: rgba(240,240,240,1);
		margin-left: 25upx;
		margin-top: 40upx;
	}
</style>
